import React, { useEffect } from 'react';
import { Form, Input, message, Modal, Select } from 'antd';
import type { IEditRoles, IRoles } from '../types/role';
import http from '../api/http';

interface Props {
  isModalOpen: boolean;       // 控制弹窗显示
  handleCancel: () => void;   // 关闭弹窗回调
  editData: IRoles|null;           // 待编辑的角色数据（必传，因为只做修改）
  onSuccess: () => void;      // 修改成功后刷新列表的回调
}
const EditRole: React.FC<Props> = ({
  isModalOpen,
  handleCancel,
  editData,
  onSuccess
}) => {
  const [form] = Form.useForm();

  // 初始化表单数据（当弹窗打开或编辑数据变化时）
  useEffect(() => {
    if (isModalOpen && editData) {
      form.setFieldsValue({
        roleId: editData.roleId,
        roleName: editData.roleName,
        deptId: editData.deptId,
        remark: editData.remark || ''
      });
    } else {
      // 弹窗关闭时重置表单
      form.resetFields();
    }
  }, [isModalOpen, form, editData]);

  // 提交修改
  const handleSubmit = async () => {
    try {
      // 验证并获取表单数据
      const values: IEditRoles = await form.validateFields();
      http.put("Roles",values).then(res=>{
        if(res.code=='1'){
          message.success('角色修改成功');
      handleCancel(); // 关闭弹窗
      onSuccess();    // 通知父组件刷新列表
        }
      }) 
    
    } catch (error) {
      console.error('修改失败:', error);
      message.error('修改失败，请重试');
    }
  };

  return (
    <Modal
      title="修改角色"
      open={isModalOpen}
      onCancel={handleCancel}
      onOk={handleSubmit}
      destroyOnClose
      width={500}
    >
      <Form
        form={form}
        layout="vertical"
      >
        {/* 角色ID（隐藏，仅作为修改标识） */}
        <Form.Item<IEditRoles>
          name="roleId"
          hidden
        >
          <Input />
        </Form.Item>

        {/* 角色名称 */}
        <Form.Item<IEditRoles>
          name="roleName"
          label="角色名称"
          rules={[
            { required: true, message: '请输入角色名称' },
            { max: 50, message: '名称长度不能超过50字' }
          ]}
        >
          <Input placeholder="请输入角色名称" />
        </Form.Item>

        {/* 部门选择 */}
        <Form.Item
          name="deptId"
          label="部门名称"
          rules={[{ required: true, message: '请选择部门名称' }]}
        >
          <Select placeholder="请选择部门">
            <Select.Option value={1}>管理部</Select.Option>
            <Select.Option value={2}>技术部</Select.Option>
            <Select.Option value={3}>市场部</Select.Option>
            {/* 根据实际业务补充其他部门 */}
          </Select>
        </Form.Item>

        {/* 备注信息 */}
        <Form.Item<IEditRoles>
          name="remark"
          label="备注"
          rules={[{ max: 200, message: '备注长度不能超过200字' }]}
        >
          <Input.TextArea rows={4} placeholder="请输入角色描述（可选）" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export { EditRole };